<template>
  <div class="FooterContainer">
    <bcb_220>
      <div class="FooterMain">
        <div class="FooterLine">
          <div class="FooterLineInfo1">
            <span class="FooterInfostr">{{ msg.str1 }}</span>
            <span class="FooterInfostr">{{ msg.str2 }}</span>
            <span class="FooterInfostr">{{ msg.str3 }}</span>
          </div>
          <div class="FooterLineInfo1">
            <span class="FooterInfostr">{{ msg.str4 }}</span>
            <span class="FooterInfostr">{{ msg.str4 }}</span>
            <span class="FooterInfostr">{{ msg.str4 }}</span>
          </div>
          <div class="FooterLineInfo1">
            <span class="FooterInfostr">{{ msg.str5 }}</span>
            <span class="FooterInfostr">{{ msg.str5 }}</span>
            <span class="FooterInfostr">{{ msg.str5 }}</span>
          </div>
        </div>
      </div>
    </bcb_220>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";

const msg = i18nt.value.footer;
</script>

<style scoped lang="scss">
.FooterContainer {
  @include rel_cen_hw;
  background: #181e46;
}
.FooterMain {
  @include rel_cen_hw;
}
.FooterLine {
  @include relative_hw(102px, 100%);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .FooterLineInfo1 {
    @include relative_hw(102px, auto);
    flex-direction: column;
    justify-content: center;

    .FooterInfostr {
      font-size: 16px;
      color: #ffffff;
      line-height: 40px;
      text-align: left;
    }
  }
}
</style>
